<template>
	<view class="head">
		您的反馈是我们成长最大的动力<br>
		<p class="text">
			点击下面卡片联系我们
		</p>
	</view>
	<view class="info_card">
		<uni-card title="QQ交流群" thumbnail="../../static/contact/qq.png" extra="点击复制" note="Tips"
			@click="launchApp('qq')">
			加入我们的官方QQ群
		</uni-card>
		<uni-card title="微信交流群" thumbnail="../../static/contact/微信.png" extra="点击复制" note="Tips"
			@click="launchApp('wechat')">
			加入我们的微信交流群
		</uni-card>
		<uni-card title="客服微信" thumbnail="../../static/contact/客服.png" extra="点击复制" note="Tips"
			@click="launchApp('user')">
			联系我们的客服
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qq: "1234567891",
				wechat: "1987654321",
				wechat_u: "users"
			};
		},
		methods: {
			cop(data) {
				uni.setClipboardData({
					data: data,
					success: function() {
						uni.showToast({
							title: '复制成功',
						});
					},
					fail: function() {
						uni.showToast({
							title: '复制失败',
						});
					}
				});
			},
			launchApp(e) {
				if (e === 'qq') {
					this.cop(this.qq)
				} else if (e === 'wechat') {
					this.cop(this.wechat)
				} else {
					this.cop(this.wechat_u)
				}

			},
		}
	}
</script>

<style lang="scss">
	.head {
		width: 98%;
		height: 100px;
		margin: 0 auto;
		font-size: 15px;
		font-weight: bold;
		padding-left: 20px;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.text {
			font-size: 13px;
			color: #66b0fc;
			margin-top: 10px;
		}
	}
</style>